<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        svg {
            width: 100px;
            height: 100px;
            transform: rotate(-90deg);
            background: rgb(50, 73, 205);
            border-radius: 50%;
        }

        circle {
            fill: rgb(50, 135, 205);
            stroke: rgb(180, 51, 159);
            stroke-width: 32;
            stroke-dasharray: 38 100;
            /* 可得到比率为38%的扇区 */
        }
    </style>
</head>

<body>
    <svg viewBox="0 0 32 32">
        <circle r="16" cx="16" cy="16" />
    </svg>
    <div class="pie">20%</div>
    <div class="pie">60%</div>
</body>

</html>